import { FC, useEffect, useRef, memo } from 'react';
import { ECharts, EChartsOption, init } from 'echarts';
import useECharts from '@/hooks/useECharts';

interface IMinerCountF2ChartProps {
  all_count: number;
  normal_count: number;
  warning_count: number;
  abnormal_count: number;
  downtime_count: number;
  offline_count: number;
}

const MinerCountChart: FC<IMinerCountF2ChartProps> = (props) => {
  const {
    all_count,
    normal_count,
    warning_count,
    abnormal_count,
    downtime_count,
    offline_count,
  } = props;
  const data = [
    {
      value: normal_count,

      name: '正常',
    },
    {
      value: warning_count,
      name: '警告',
    },
    {
      value: abnormal_count,
      name: '异常',
    },
    {
      value: downtime_count,
      name: '停机',
    },
    {
      value: offline_count,
      name: '离线',
    },
  ];

  const option: EChartsOption = {
    tooltip: undefined,
    title: {
      text: `状态             矿机数(台)`,
      right: '6%',
      top: 28,
      textStyle: {
        color: '#283E59',
        fontSize: 12,
        fontWeight: 'normal',
      },
    },
    //设置饼状图每个颜色块的颜色
    color: ['#26c475', '#f5a623', '#f7481c', '#000000', '#999999', '#BAF5C4'],
    legend: {
      itemWidth: 14,
      itemHeight: 8,
      orient: 'vertical',
      right: '11%',
      top: '53px',
      icon: 'roundRect',
      textStyle: {
        color: '#95A9C9',
        fontSize: 12,
        lineHeight: 22,
      },

      formatter(name: string) {
        const space = `               `;
        if (name === '正常') {
          return `正常${space}${normal_count}`;
        }
        if (name === '警告') {
          return `警告${space}${warning_count}`;
        }
        if (name === '异常') {
          return `异常${space}${abnormal_count}`;
        }
        if (name === '停机') {
          return `停机${space}${downtime_count}`;
        }
        if (name === '离线') {
          return `离线${space}${offline_count}`;
        }

        return name;
      },
    },
    graphic: [
      {
        type: 'text',
        left: '18%',
        top: '37%',
        style: {
          text:
            (((all_count - offline_count) / all_count) * 100).toFixed(2) + '%',

          fill: '#283E59',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      {
        type: 'text',
        left: '18%',
        top: '47%',
        style: {
          text: '在线率',
          textAlign: 'center',
          fill: '#95A9C9',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      {
        type: 'text',
        left: document.body.getBoundingClientRect().width >= 375 ? '11%' : 30,

        bottom: 36,
        style: {
          text: '矿机总数：',
          textAlign: 'center',
          fill: '#95A9C9',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      {
        type: 'text',
        left: document.body.getBoundingClientRect().width >= 375 ? '28%' : 90,
        bottom: 36,

        style: {
          text: all_count.toString(),
          textAlign: 'center',
          fill: '#283E59',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
    ],
    series: [
      {
        name: 'value',
        type: 'pie',
        radius: ['41%', '53%'],
        // 饼图中心点在23%
        center: ['23%', '43%'],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        label: {
          show: false,
        },
        data: data,
      },
    ],
  };

  const chartDivRef = useRef(null);
  useECharts(chartDivRef, option);

  return (
    <div ref={chartDivRef} style={{ width: '100%', height: '200px' }}></div>
  );
};
export default memo(MinerCountChart);
